Premium Content

CSS BASICS

Learn the fundamental concepts of CSS styling

Beginner

Module 1: CSS Syntax and Implementation

CSS (Cascading Style Sheets) is the language used to style and layout web pages. It controls colors, fonts, spacing, positioning, and responsive behavior. CSS can be implemented inline, internally, or externally.

Try It Yourself:

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Basics</title>
</head>
<body>
    <div class="container">
        <h1 class="main-title">Welcome to CSS Styling</h1>
        <p class="intro-text">This text will be styled with CSS.</p>
        <button class="styled-button">Click Me!</button>
        <div class="color-box">Colorful Box</div>
    </div>
</body>
</html>

/* CSS Basics - Selectors and Properties */

/* Element Selector - styles all elements of that type */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
}

/* Class Selector - styles elements with class="container" */
.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Class Selector for title */
.main-title {
    color: #2965F1;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Class Selector for paragraph */
.intro-text {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Class Selector for button */
.styled-button {
    background-color: #2965F1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.styled-button:hover {
    background-color: #1a4bb8;
}

/* Class Selector for colored box */
.color-box {
    background: linear-gradient(135deg, #2965F1, #04fc42);
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    margin-top: 20px;
    font-weight: bold;
}

Live Preview

Key Points:

selector { property: value; } - Basic CSS syntax structure
Element Selectors target HTML tags (e.g., body, h1)
Class Selectors (prefixed with .) target elements with specific classes
ID Selectors (prefixed with #) target single elements
Properties control appearance: color, font-size, background, etc.
Values can be colors, sizes, fonts, or other measurements
CSS can be written in separate files, <style> tags, or inline with style attribute

Premium Content

SELECTORS & PROPERTIES

Master CSS selectors and common properties

Beginner

Module 2: Advanced Selectors and Essential Properties

CSS offers powerful selectors to target elements precisely. Understanding combinators, pseudo-classes, and specific properties will give you fine control over your styling.

Try It Yourself:

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
</head>
<body>
    <div class="container">
        <header class="main-header">
            <h1>CSS Selectors Demo</h1>
            <nav>
                <ul class="nav-list">
                    <li><a href="#">Home</a></li>
                    <li class="active"><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        
        <main class="content">
            <section class="intro">
                <h2>Welcome Section</h2>
                <p>This is the first paragraph.</p>
                <p>This is the second paragraph.</p>
                <div class="highlight">Special highlighted content</div>
            </section>
            
            <section class="features">
                <h2>Our Features</h2>
                <div class="feature-item">
                    <h3>Feature 1</h3>
                    <p>Description of feature one.</p>
                </div>
                <div class="feature-item">
                    <h3>Feature 2</h3>
                    <p>Description of feature two.</p>
                </div>
                <div class="feature-item special">
                    <h3>Special Feature</h3>
                    <p>This is a special feature!</p>
                </div>
            </section>
            
            <form class="contact-form">
                <input type="text" placeholder="Your Name" required>
                <input type="email" placeholder="Your Email">
                <button type="submit">Send Message</button>
            </form>
        </main>
    </div>
</body>
</html>

/* Advanced CSS Selectors and Properties */

/* Universal Selector - affects all elements */
* {
    box-sizing: border-box;
}

/* Descendant Selector - targets .nav-list inside header */
header .nav-list {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
}

/* Child Selector - direct children only */
.nav-list > li {
    border-bottom: 2px solid transparent;
}

/* Adjacent Sibling Selector - p immediately after h2 */
h2 + p {
    font-weight: bold;
    color: #2965F1;
}

/* General Sibling Selector - all p after h2 */
h2 ~ p {
    margin-left: 20px;
}

/* Attribute Selector - input with type="text" */
input[type="text"] {
    border: 2px solid #2965F1;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

/* Attribute Selector - required fields */
input:required {
    border-left: 4px solid #04fc42;
}

/* Pseudo-classes for interactive states */
a:hover {
    color: #04fc42;
    text-decoration: none;
}

.nav-list li.active {
    border-bottom-color: #2965F1;
}

.feature-item.special {
    background: linear-gradient(135deg, #2965F1, #04fc42);
    color: white;
    padding: 15px;
    border-radius: 8px;
}

/* Pseudo-elements */
h1::after {
    content: " 🎨";
}

.highlight::before {
    content: "⭐ ";
    color: gold;
}

/* Structural pseudo-classes */
.feature-item:first-child {
    border-left: 4px solid #2965F1;
}

.feature-item:last-child {
    border-right: 4px solid #04fc42;
}

.feature-item:nth-child(2) {
    background-color: #f0f8ff;
}

/* Form styling */
.contact-form {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

button[type="submit"] {
    background: #2965F1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

button[type="submit"]:hover {
    background: #1a4bb8;
    transform: translateY(-2px);
}

button[type="submit"]:active {
    transform: translateY(0);
}

Live Preview

Key Points:

Descendant Selectors (space) target nested elements
Child Selectors (>) target direct children only
Adjacent Sibling (+) and General Sibling (~) selectors
Attribute Selectors target elements with specific attributes
Pseudo-classes (:hover, :active, :nth-child()) for dynamic states
Pseudo-elements (::before, ::after) for generated content
Multiple classes can be combined for specific targeting
Understanding selector specificity is crucial for complex stylesheets

Premium Content

BOX MODEL

Understand margin, border, padding, and content

Beginner

Module 3: The CSS Box Model

Every element in CSS is a rectangular box. The box model describes how margin, border, padding, and content work together to determine an element's size and spacing.

Try It Yourself:

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Model</title>
</head>
<body>
    <div class="container">
        <h1>CSS Box Model Demonstration</h1>
        
        <div class="box-model-visual">
            <div class="margin-box">Margin
                <div class="border-box">Border
                    <div class="padding-box">Padding
                        <div class="content-box">Content</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="examples">
            <div class="example-box standard-box">
                <h3>Standard Box Model</h3>
                <p>Width/height set content size only</p>
            </div>
            
            <div class="example-box border-box-example">
                <h3>Border-Box Model</h3>
                <p>Width/height include padding and border</p>
            </div>
            
            <div class="spacing-example">
                <div class="spaced-item">Item 1</div>
                <div class="spaced-item">Item 2</div>
                <div class="spaced-item">Item 3</div>
            </div>
        </div>
    </div>
</body>
</html>

/* CSS Box Model Demonstration */

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Box Model Visualization */
.box-model-visual {
    margin: 40px 0;
}

.margin-box {
    background-color: #FFE4E1;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    color: #D63384;
    border: 2px dashed #D63384;
}

.border-box {
    background-color: #E6F3FF;
    padding: 25px;
    border: 15px solid #2965F1;
    color: #2965F1;
    font-weight: bold;
}

.padding-box {
    background-color: #F0FFF0;
    padding: 20px;
    border: 2px dashed #04fc42;
    color: #03c734;
    font-weight: bold;
}

.content-box {
    background-color: #FFF0F5;
    padding: 40px;
    border: 2px solid #FF69B4;
    color: #FF69B4;
    font-weight: bold;
}

/* Box Model Examples */
.examples {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.example-box {
    padding: 20px;
    border: 2px solid #333;
}

.standard-box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #2965F1;
    margin: 10px;
    background-color: #f0f8ff;
}

.border-box-example {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #04fc42;
    margin: 10px;
    background-color: #f0fff0;
    box-sizing: border-box; /* This changes everything! */
}

/* Spacing Examples */
.spacing-example {
    display: flex;
    gap: 20px;
    background-color: #f5f5f5;
    padding: 20px;
}

.spaced-item {
    background: #2965F1;
    color: white;
    padding: 15px;
    border-radius: 5px;
    flex: 1;
    text-align: center;
}

/* Margin collapsing demonstration */
.spaced-item:first-child {
    margin-bottom: 30px;
}

/* Individual margin/padding properties */
.standard-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #2965F1;
}

.border-box-example h3 {
    margin: 0 0 10px 0;
    padding: 5px 10px;
    background: #04fc42;
    color: #000;
    border-radius: 3px;
}

/* Box shadow for depth */
.example-box {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
}

.example-box:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Live Preview

Key Points:

Content: The actual content of the element (text, images, etc.)
Padding: Space between content and border (inside the element)
Border: Line that surrounds padding and content
Margin: Space outside the border (between elements)
box-sizing: content-box (default): Width/height only affect content
box-sizing: border-box: Width/height include padding and border
Margins can collapse (overlap) between adjacent elements
Use shorthand properties: margin: top right bottom left;
Negative margins are possible and can create overlapping effects

Premium Content

LAYOUT & POSITIONING

Learn to control element positioning and layout

Intermediate

Module 4: Layout and Positioning Techniques

CSS provides multiple ways to control the layout of elements on a page. Understanding display properties, positioning, floats, and modern layout techniques is essential for creating complex designs.

Try It Yourself:

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Layout & Positioning</title>
</head>
<body>
    <div class="container">
        <h1>CSS Layout & Positioning</h1>
        
        <section class="display-section">
            <h2>Display Property Examples</h2>
            <div class="display-examples">
                <div class="block-example">Block Element</div>
                <div class="inline-example">Inline Element</div>
                <div class="inline-block-example">Inline-Block</div>
                <div class="inline-block-example">Another Inline-Block</div>
            </div>
        </section>
        
        <section class="positioning-section">
            <h2>Position Property Examples</h2>
            <div class="position-container">
                <div class="static-box">Static (default)</div>
                <div class="relative-box">Relative (offset)</div>
                <div class="absolute-box">Absolute</div>
                <div class="fixed-box">Fixed</div>
                <div class="sticky-box">Sticky</div>
            </div>
        </section>
        
        <section class="float-section">
            <h2>Float Property Examples</h2>
            <div class="float-container">
                <div class="float-left">Float Left</div>
                <div class="float-right">Float Right</div>
                <div class="clear-both">Clear Both</div>
            </div>
        </section>
        
        <section class="z-index-section">
            <h2>Z-Index Examples</h2>
            <div class="z-index-container">
                <div class="z-box box-1">Z-Index: 1</div>
                <div class="z-box box-2">Z-Index: 2</div>
                <div class="z-box box-3">Z-Index: 3</div>
            </div>
        </section>
    </div>
</body>
</html>

/* CSS Layout and Positioning */

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Display Property Examples */
.display-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

.display-examples {
    margin-top: 15px;
}

.block-example {
    display: block;
    background: #2965F1;
    color: white;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
}

.inline-example {
    display: inline;
    background: #04fc42;
    color: #000;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 3px;
}

.inline-block-example {
    display: inline-block;
    background: #8A2BE2;
    color: white;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 5px;
    width: 200px;
}

/* Positioning Examples */
.positioning-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f0f8ff;
    border-radius: 8px;
    position: relative;
    height: 400px;
}

.position-container {
    position: relative;
    height: 300px;
    border: 2px dashed #ccc;
    margin-top: 15px;
}

.static-box {
    position: static;
    background: #FF6B6B;
    color: white;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
}

.relative-box {
    position: relative;
    background: #4ECDC4;
    color: white;
    padding: 15px;
    border-radius: 5px;
    top: 20px;
    left: 30px;
}

.absolute-box {
    position: absolute;
    background: #45B7D1;
    color: white;
    padding: 15px;
    border-radius: 5px;
    top: 50px;
    right: 20px;
}

.fixed-box {
    position: fixed;
    background: #96CEB4;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.sticky-box {
    position: sticky;
    background: #FFEAA7;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    top: 20px;
    margin-top: 10px;
}

/* Float Examples */
.float-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fff0f5;
    border-radius: 8px;
}

.float-container {
    border: 2px solid #ccc;
    padding: 15px;
    margin-top: 15px;
    overflow: auto; /* Clearfix */
}

.float-left {
    float: left;
    background: #2965F1;
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    width: 150px;
    height: 100px;
}

.float-right {
    float: right;
    background: #04fc42;
    color: #000;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    width: 150px;
    height: 100px;
}

.clear-both {
    clear: both;
    background: #8A2BE2;
    color: white;
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
}

/* Z-Index Examples */
.z-index-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
}

.z-index-container {
    position: relative;
    height: 200px;
    margin-top: 15px;
}

.z-box {
    position: absolute;
    width: 200px;
    height: 100px;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.box-1 {
    background: rgba(255, 107, 107, 0.8);
    top: 20px;
    left: 20px;
    z-index: 1;
}

.box-2 {
    background: rgba(78, 205, 196, 0.8);
    top: 40px;
    left: 40px;
    z-index: 2;
}

.box-3 {
    background: rgba(69, 183, 209, 0.8);
    top: 60px;
    left: 60px;
    z-index: 3;
}

Live Preview

Key Points:

Display Property: Controls how elements are rendered (block, inline, inline-block, none)
Position Property: Controls element positioning (static, relative, absolute, fixed, sticky)
Float Property: Allows elements to wrap around content (left, right, none)
Z-Index: Controls stacking order of positioned elements
Static: Default positioning, follows normal document flow
Relative: Positioned relative to its normal position
Absolute: Positioned relative to nearest positioned ancestor
Fixed: Positioned relative to viewport, stays fixed during scrolling
Sticky: Toggles between relative and fixed based on scroll position
Use clear property to control behavior of elements after floats

Premium Content

FLEXBOX

Master the modern CSS layout system

Intermediate

Module 5: Flexbox Layout System

Flexbox is a powerful layout model that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic.

Try It Yourself:

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Flexbox</title>
</head>
<body>
    <div class="container">
        <h1>CSS Flexbox Layout</h1>
        
        <section class="flex-direction">
            <h2>Flex Direction</h2>
            <div class="flex-container direction-row">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
            </div>
            <div class="flex-container direction-column">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
            </div>
        </section>
        
        <section class="flex-justify">
            <h2>Justify Content</h2>
            <div class="flex-container justify-start">
                <div class="flex-item">Start</div>
                <div class="flex-item">Start</div>
            </div>
            <div class="flex-container justify-center">
                <div class="flex-item">Center</div>
                <div class="flex-item">Center</div>
            </div>
            <div class="flex-container justify-end">
                <div class="flex-item">End</div>
                <div class="flex-item">End</div>
            </div>
            <div class="flex-container justify-between">
                <div class="flex-item">Between</div>
                <div class="flex-item">Between</div>
                <div class="flex-item">Between</div>
            </div>
        </section>
        
        <section class="flex-align">
            <h2>Align Items</h2>
            <div class="flex-container align-stretch">
                <div class="flex-item">Stretch</div>
                <div class="flex-item">Stretch</div>
            </div>
            <div class="flex-container align-center">
                <div class="flex-item">Center</div>
                <div class="flex-item">Center</div>
            </div>
            <div class="flex-container align-start">
                <div class="flex-item">Start</div>
                <div class="flex-item">Start</div>
            </div>
            <div class="flex-container align-end">
                <div class="flex-item">End</div>
                <div class="flex-item">End</div>
            </div>
        </section>
        
        <section class="flex-wrap">
            <h2>Flex Wrap</h2>
            <div class="flex-container wrap-nowrap">
                <div class="flex-item">Item 1</div>
                <div class="flex-item">Item 2</div>
                <div class="flex-item">Item 3</div>
                <div class="flex-item">Item 4</div>
                <div class="flex-item">Item 5</div>
            </div>
            <div class="flex-container wrap-wrap">
                <div class="flex-item">Item 1</div>
                <div class="flex-item">Item 2</div>
                <div class="flex-item">Item 3</div>
                <div class="flex-item">Item 4</div>
                <div class="flex-item">Item 5</div>
            </div>
        </section>
        
        <section class="flex-grow-shrink">
            <h2>Flex Grow & Shrink</h2>
            <div class="flex-container grow-example">
                <div class="flex-item grow-1">Grow 1</div>
                <div class="flex-item grow-2">Grow 2</div>
                <div class="flex-item grow-3">Grow 3</div>
            </div>
        </section>
    </div>
</body>
</html>

/* CSS Flexbox Layout */

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Base Flex Container Styles */
.flex-container {
    display: flex;
    background: #e0e0e0;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    min-height: 100px;
}

.flex-item {
    background: #2965F1;
    color: white;
    padding: 20px;
    margin: 5px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

/* Flex Direction Examples */
.direction-row {
    flex-direction: row;
}

.direction-column {
    flex-direction: column;
    height: 200px;
}

/* Justify Content Examples */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

/* Align Items Examples */
.align-stretch {
    align-items: stretch;
    height: 150px;
}

.align-stretch .flex-item {
    height: auto;
}

.align-center {
    align-items: center;
    height: 150px;
}

.align-start {
    align-items: flex-start;
    height: 150px;
}

.align-end {
    align-items: flex-end;
    height: 150px;
}

/* Flex Wrap Examples */
.wrap-nowrap {
    flex-wrap: nowrap;
    width: 400px;
}

.wrap-nowrap .flex-item {
    min-width: 100px;
}

.wrap-wrap {
    flex-wrap: wrap;
    width: 400px;
}

.wrap-wrap .flex-item {
    min-width: 100px;
}

/* Flex Grow Examples */
.grow-example {
    width: 100%;
}

.grow-1 {
    flex-grow: 1;
    background: #FF6B6B;
}

.grow-2 {
    flex-grow: 2;
    background: #4ECDC4;
}

.grow-3 {
    flex-grow: 3;
    background: #45B7D1;
}

/* Additional Flex Properties */
.flex-item:nth-child(odd) {
    background: #04fc42;
    color: #000;
}

.flex-item:nth-child(3n) {
    background: #8A2BE2;
    color: white;
}

/* Responsive Flexbox */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
    
    .direction-row {
        flex-direction: column;
    }
}

Live Preview

Key Points:

Flex Container: Parent element with display: flex
Flex Items: Direct children of flex container
Main Axis: Primary axis defined by flex-direction
Cross Axis: Perpendicular to main axis
Flex Direction: Controls direction of flex items (row, column, row-reverse, column-reverse)
Justify Content: Aligns items along main axis (flex-start, center, flex-end, space-between, space-around)
Align Items: Aligns items along cross axis (stretch, flex-start, center, flex-end, baseline)
Flex Wrap: Controls whether items wrap to new lines (nowrap, wrap, wrap-reverse)
Flex Grow: Defines ability for item to grow if necessary
Flex Shrink: Defines ability for item to shrink if necessary
Flex Basis: Defines default size of item before remaining space is distributed
Align Self: Overrides align-items for individual flex items

Premium Content

GRID & RESPONSIVE

Master CSS Grid and responsive design techniques

Intermediate

Module 6: CSS Grid and Responsive Design

CSS Grid is a powerful two-dimensional layout system that works well for complex web layouts. Combined with responsive design techniques using media queries, you can create layouts that work perfectly on any device.

Try It Yourself:

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid & Responsive</title>
</head>
<body>
    <div class="container">
        <h1>CSS Grid & Responsive Design</h1>
        
        <section class="grid-basics">
            <h2>Grid Basics</h2>
            <div class="grid-container basic-grid">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
            </div>
        </section>
        
        <section class="grid-template">
            <h2>Grid Template Areas</h2>
            <div class="grid-container template-grid">
                <header class="grid-item">Header</header>
                <nav class="grid-item">Navigation</nav>
                <main class="grid-item">Main Content</main>
                <aside class="grid-item">Sidebar</aside>
                <footer class="grid-item">Footer</footer>
            </div>
        </section>
        
        <section class="responsive-grid">
            <h2>Responsive Grid</h2>
            <div class="grid-container responsive-example">
                <div class="grid-item">Item 1</div>
                <div class="grid-item">Item 2</div>
                <div class="grid-item">Item 3</div>
                <div class="grid-item">Item 4</div>
                <div class="grid-item">Item 5</div>
                <div class="grid-item">Item 6</div>
            </div>
        </section>
        
        <section class="media-queries">
            <h2>Media Queries</h2>
            <div class="responsive-container">
                <div class="responsive-item">
                    <h3>Desktop Layout</h3>
                    <p>This content changes based on screen size</p>
                </div>
                <div class="responsive-item">
                    <h3>Tablet Layout</h3>
                    <p>This content changes based on screen size</p>
                </div>
                <div class="responsive-item">
                    <h3>Mobile Layout</h3>
                    <p>This content changes based on screen size</p>
                </div>
            </div>
        </section>
        
        <section class="viewport-units">
            <h2>Viewport Units</h2>
            <div class="viewport-demo">
                <div class="vh-demo">50vh Height</div>
                <div class="vw-demo">50vw Width</div>
                <div class="vmin-demo">20vmin Size</div>
            </div>
        </section>
    </div>
</body>
</html>

/* CSS Grid and Responsive Design */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Grid Basics */
.grid-container {
    display: grid;
    gap: 10px;
    margin: 15px 0;
}

.grid-item {
    background: #2965F1;
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.basic-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
}

/* Grid Template Areas */
.template-grid {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header"
        "nav main sidebar"
        "footer footer footer";
    height: 400px;
}

.template-grid header {
    grid-area: header;
    background: #FF6B6B;
}

.template-grid nav {
    grid-area: nav;
    background: #4ECDC4;
}

.template-grid main {
    grid-area: main;
    background: #45B7D1;
}

.template-grid aside {
    grid-area: sidebar;
    background: #96CEB4;
}

.template-grid footer {
    grid-area: footer;
    background: #FFEAA7;
    color: #000;
}

/* Responsive Grid */
.responsive-example {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 100px;
}

.responsive-example .grid-item:nth-child(odd) {
    background: #04fc42;
    color: #000;
}

.responsive-example .grid-item:nth-child(3n) {
    background: #8A2BE2;
}

/* Media Queries */
.responsive-container {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

.responsive-item {
    flex: 1;
    background: #2965F1;
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

/* Viewport Units */
.viewport-demo {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.vh-demo {
    background: #FF6B6B;
    color: white;
    padding: 20px;
    border-radius: 5px;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.vw-demo {
    background: #4ECDC4;
    color: white;
    padding: 20px;
    border-radius: 5px;
    width: 50vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmin-demo {
    background: #45B7D1;
    color: white;
    padding: 20px;
    border-radius: 5px;
    width: 20vmin;
    height: 20vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Media Queries for Responsive Design */
@media (max-width: 1024px) {
    .template-grid {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        height: auto;
    }
    
    .responsive-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .basic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .responsive-example {
        grid-template-columns: 1fr;
    }
    
    .viewport-demo {
        flex-direction: column;
    }
    
    .vw-demo {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .basic-grid {
        grid-template-columns: 1fr;
    }
    
    .container {
        padding: 10px;
    }
    
    section {
        padding: 15px;
    }
}

/* Print Media Query */
@media print {
    .grid-item {
        background: white !important;
        color: black !important;
        border: 1px solid black;
    }
}

/* Orientation Media Query */
@media (orientation: landscape) {
    .responsive-item::before {
        content: "Landscape Mode";
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
    }
}

@media (orientation: portrait) {
    .responsive-item::before {
        content: "Portrait Mode";
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
    }
}

Live Preview

Key Points:

CSS Grid: Two-dimensional layout system for rows and columns
Grid Container: Parent element with display: grid
Grid Items: Direct children of grid container
Grid Template Columns/Rows: Defines track sizes
Grid Areas: Named grid areas for semantic layouts
Grid Gap: Space between grid items (row-gap, column-gap)
Media Queries: Apply styles based on device characteristics
Viewport Units: vw, vh, vmin, vmax for responsive sizing
Breakpoints: Common screen sizes for responsive design
Mobile First: Design for mobile then enhance for larger screens
Responsive Images: Use max-width: 100% for flexible images
Flexible Grids: Use percentages, fr units, or auto for flexible layouts

PRACTICE PLAYGROUND

Experiment with CSS styling

Your CSS Playground: Style Your Creations

Use this space to experiment with CSS! Try different selectors, properties, and values. Create beautiful layouts and see the results in real-time.

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Playground</title>
</head>
<body>
    <div class="playground-container">
        <header class="playground-header">
            <h1>CSS Playground</h1>
            <p>Experiment with CSS properties and see instant results!</p>
        </header>
        
        <main class="playground-content">
            <section class="demo-section">
                <h2>Style These Elements</h2>
                <div class="demo-box" id="box1">Box 1</div>
                <div class="demo-box" id="box2">Box 2</div>
                <div class="demo-box special" id="box3">Special Box</div>
            </section>
            
            <section class="interactive-section">
                <button class="btn-primary">Primary Button</button>
                <button class="btn-secondary">Secondary Button</button>
                <button class="btn-hover">Hover Effect</button>
            </section>
            
            <section class="grid-demo">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
            </section>
        </main>
    </div>
</body>
</html>

/* CSS Playground - Experiment Here! */

.playground-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

.playground-header {
    text-align: center;
    background: linear-gradient(135deg, #2965F1, #04fc42);
    color: white;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.playground-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
}

.playground-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

/* Demo Section */
.demo-section {
    margin-bottom: 40px;
}

.demo-box {
    width: 200px;
    height: 100px;
    background: #2965F1;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.demo-box:hover {
    transform: translateY(-5px);
}

#box2 {
    background: #04fc42;
    color: #000;
}

.demo-box.special {
    background: linear-gradient(135deg, #2965F1, #04fc42);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Interactive Section */
.interactive-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
}

.btn-primary, .btn-secondary, .btn-hover {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: #2965F1;
    color: white;
}

.btn-secondary {
    background: #04fc42;
    color: #000;
}

.btn-hover {
    background: #666;
    color: white;
}

/* Grid Demo */
.grid-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.grid-item {
    background: #2965F1;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
}

/* Add your custom CSS below to experiment! */

/* Try changing colors, sizes, layouts, and animations */
/* Example: Change the grid layout */
.grid-demo {
    /* grid-template-columns: repeat(2, 1fr); */
}

/* Example: Add animation to buttons */
.btn-hover:hover {
    /* transform: scale(1.1); */
    /* background: #FFD700; */
}

/* Example: Style specific elements differently */
.demo-box:nth-child(odd) {
    /* border: 3px solid gold; */
}

Live Preview

CSS Challenge Exercises:

Create a responsive navigation menu with hover effects
Style a card component with:
- Box shadow and rounded corners
- Hover animations
- Proper spacing and typography
Build a CSS grid layout for a photo gallery
Create a loading spinner using CSS animations
Design a responsive pricing table with different tiers

CSS Properties to Experiment With:

Layout: display, position, flexbox, grid
Spacing: margin, padding, gap
Colors & Backgrounds: color, background, gradient
Typography: font-family, font-size, line-height
Effects: box-shadow, border-radius, transform
Animations: transition, animation, @keyframes

CSS BASICS

Learn the fundamental concepts of CSS styling

Module 1: CSS Syntax and Implementation

Try It Yourself:

Key Points:

SELECTORS & PROPERTIES

Master CSS selectors and common properties

Module 2: Advanced Selectors and Essential Properties

Try It Yourself:

Key Points:

BOX MODEL

Understand margin, border, padding, and content

Module 3: The CSS Box Model

Try It Yourself:

Key Points:

LAYOUT & POSITIONING

Learn to control element positioning and layout

Module 4: Layout and Positioning Techniques

Try It Yourself:

Key Points:

FLEXBOX

Master the modern CSS layout system

Module 5: Flexbox Layout System

Try It Yourself:

Key Points:

GRID & RESPONSIVE

Master CSS Grid and responsive design techniques

Module 6: CSS Grid and Responsive Design

Try It Yourself:

Key Points:

PRACTICE PLAYGROUND

Experiment with CSS styling

Your CSS Playground: Style Your Creations

CSS Challenge Exercises:

CSS Properties to Experiment With:

Unlock Premium SkillMynte Content

Premium Courses

Certification

Mentorship

Monthly

Annual Best Value

Lifetime